import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// 创建异步对象
// 作用: 1. 监听promise的状态 2. 当做异步的actionCreator使用
export const asyncCount = createAsyncThunk('yyy', () => {
  // 这个函数类似于原来传入到dispatch中的函数,这个函数中执行异步代码.但是有一点不一样,必须返回一个promise实例
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(8)
      //   reject()
    }, 1000)
  })
})
// countSlice我们称之为切片.其实就是将reducer函数和actionCreator的代码合并在一起
const countSlice = createSlice({
  name: 'count', // slice的名称,为了修改数据时,作为type的一部分
  initialState: { c: 1, msg: 'hello', loading: false }, //初始化数据
  reducers: {
    // 这个花括号中写的内容,相当于写reducer函数中的case,只不过要写成函数的形式
    add: function (state, action) {
      state.c = state.c + action.payload
    },
    sub: function (state, action) {
      state.c = state.c - 1
    },
  },
  // 配置异步的reducer
  extraReducers(builder) {
    builder.addCase(asyncCount.pending, (state, action) => {
      // 当异步正在执行的时候回调用
      //   console.log('正在异步操作')
      state.loading = true
    })
    builder.addCase(asyncCount.fulfilled, (state, action) => {
      // 当异步成功调用
      //   console.log('异步操作成功', state)
      //   console.log(action)
      state.c = state.c + action.payload
      state.loading = false
    })
    builder.addCase(asyncCount.rejected, (state, action) => {
      // //当异步失败调用
      console.log('异步操作失败')
      state.loading = false
    })
  },
})

// 创建store对象

const store = configureStore({
  reducer: {
    // 默认就是合并reducer的写法
    xxx: countSlice.reducer, // slice对象.reducer返回自动生成的reducer函数
  },
})

export default store
export const { add, sub } = countSlice.actions

// 注意: actionCreator的结构: {type: '', payload: 值}
// const { add, sub } = countSlice.actions
// // console.log(add(3))
// console.log(store.getState())
// store.dispatch(add(3))
// console.log(store.getState())
